<template>
    <view class="custom-search">
        <view>
            <u-search
                :show-action="showFilter"
                action-text="筛选"
                bg-color="#fff"
                :clearabled="false"
                :animation="false"
                shape="square"
                @custom="hanlderFilter"
                @search="handlerSearch">
            </u-search>
        </view>
        <u-popup v-model="show" mode="right">
            <view class="filter-content-box">
                <view class="filter-title">
                    <view>
                        筛选
                    </view>
                    <view @click="show = false">
                        <u-icon name="close" size="32"></u-icon>
                    </view>
                </view>
                <view class="filter-content">
                    <view class="custom-form">
                        <view class="custom-form-item" v-for="(item, index) in filterOptions" :key="index">
                            <view class="custom-form-item_label">
                                {{item.label}}
                            </view>
                            <view class="custom-form-item_content">
                                <view class="filter-mul-select" v-if="item.type == 'mul-select'">
                                    <view
                                        class="filter-mul-select-item"
                                        v-for="(_item, _index) in item.options"
                                        :key="_index"
                                        :class="searchForm[item.prop] && searchForm[item.prop].includes(_item.value) ? 'active' : ''"
                                        @click="handlerChoose(_item, item.prop)">
                                        {{_item.label}}
                                    </view>
                                </view>
                                <view class="filter-time-range" v-if="item.type == 'timeRange'">
                                    <view class="custom-input" @click="handlerShowDateDiaolg(item, item.prop[0])">{{searchForm[item.prop[0]] || '开始时间'}}</view>
                                    <view style="margin: 0 8rpx">—</view>
                                    <view  class="custom-input" @click="handlerShowDateDiaolg(item, item.prop[1])">{{searchForm[item.prop[1]] || '结束时间'}}</view>
                                </view>
                                <!-- <cusSelect v-model:data="searchForm.a" :options="options"></cusSelect> -->
                            </view>
                        </view>
                     </view>
                </view>
                <view class="filter-footer">
                    <view style="margin-right: 32rpx" @click="resetForm">
                        <u-button>
                            重置
                        </u-button>
                    </view>
                    <view>
                        <u-button type="primary" @click="confirmForm">
                            确定
                        </u-button>
                    </view>
                </view>
            </view>
		</u-popup>
        <u-picker v-model="showTime" mode="time" :params="params" :default-time="defaultTime" @confirm="confirmDate" @cancel="show = false"></u-picker>
    </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watchEffect } from 'vue'
const props = defineProps({
    showFilter: {
        type: Boolean,
        default: false
    },
    filterOptions: {
        type: Array,
        default: () => []
    }
})
const params = ref({
    year: true,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false
})
const defaultTime = ref('')
const emits = defineEmits(['search'])
const show = ref(false)
const showTime = ref(false)
const searchForm = ref({
    keyword: ''
})
const currentPropDate = ref('')
const handlerShowDateDiaolg = (data, prop) => {
    const now = new Date()

    showTime.value = true
    defaultTime.value = searchForm.value[prop] || `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
    currentPropDate.value = prop
    if (data.formatParams) {
        params.value = data.formatParams
    }
}
const confirmDate = (data) => {
    searchForm.value[currentPropDate.value] = `${data.year}-${data.month}-${data.day}`
    searchForm.value = Object.assign({}, searchForm.value)
}
const hanlderFilter = (val:string) => {
    console.log(val)
    show.value = true
}
const resetForm = () => {
    searchForm.value = {}
}
const confirmForm = () => {
    show.value = false
    emits('search', searchForm.value)
}
const handlerSearch = (val) => {
    console.log(val)
    searchForm.value.keyword = val
    emits('search', searchForm.value)
}
const handlerChoose = (data, prop) => {
    if (searchForm.value[prop]) {
        let index = searchForm.value[prop].findIndex(item => item == data.value)
        if (index > -1) {
            searchForm.value[prop].splice(index, 1)
        } else {
            searchForm.value[prop].push(data.value)
        }
    } else {
        if (!searchForm.value[prop]) searchForm.value[prop] = []
        searchForm.value[prop].push(data.value)
    }
    
}
</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style lang="scss">
.custom-search{
    .u-search{
        .u-content{
            border: 1px solid #D1D5DB;
            border-radius: 16rpx;
        }
    }
    .filter-content-box{
        width: 100vw;
        height: 100%;
        
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .filter-title{
            font-size: 36rpx;
            color: #1E3A8A;
            padding: 24rpx;
            display: flex;
            justify-content: space-between;
        }
        .filter-content{
            padding: 0 24rpx;
            flex: 1;
        }
        .filter-footer{
            display: flex;
            margin: 32prx;
            padding: 32rpx;
            border-top: 1px solid #D1D5DB;
            & > view{
                flex: 1;
            }
        }
        .filter-mul-select{
            display: flex;
            flex-wrap: wrap;
            .filter-mul-select-item{
                padding: 12rpx 20rpx;
                border: 1px solid #D1D5DB;
                border-radius: 8px;
                margin-right: 16rpx;
                margin-bottom: 16rpx;
                &.active{
                    background: #1E40AF;
                    color: #fff;
                }
            }
        }
        .filter-time-range{
            display: flex;
            align-items: center;
        }
    }
}
</style>